<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    title="导出JSON"
    width="750px"
    showFooter
  >
    <MyAceEditor
      ref="editor"
      mode="json"
      v-model:content="content"
      :style="aceEditorStyle"
      :readOnly="true"
    />
    <template #footer>
      <Button @click="handleCopy">复制JSON</Button>
      <Button @click="handleCopy" type="primary">导出JSON</Button>
    </template>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref, reactive } from "vue";
import { Button } from "ant-design-vue";
import { BasicDrawer, useDrawerInner } from "/@/components/Drawer";
import MyAceEditor from "/@/components/My/MyAceEditor.vue";
import { useCopyToClipboard } from "/@/hooks/web/useCopyToClipboard";
import { useMessage } from "/@/hooks/web/useMessage";
const { createMessage } = useMessage();
const emit = defineEmits(["register", "success"]);
const aceEditorStyle = ref<string>("width: 100%; height: calc(100vh - 150px)");
const content = ref();
const [register, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  content.value = data.content;
  console.log("content", data.content);
  setDrawerProps({});
});

const handleCopy = () => {
  const { clipboardRef, isSuccessRef } = useCopyToClipboard(content.value);
  clipboardRef.value = content.value;
  if (unref(isSuccessRef)) {
    createMessage.success("复制成功");
  }
};
</script>
